<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="format-detection" content="telephone=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="icon" href="/images/icons/favicon-16x16.png?v=2.6.2" type="image/png" sizes="16x16"><link rel="icon" href="/images/icons/favicon-32x32.png?v=2.6.2" type="image/png" sizes="32x32"><meta name="description" content="组件特点        可自定义弹框内容、大小、按钮类型、主题颜色、过渡效果等 可通过插槽自定义弹框主体内容">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue 可自定义弹框组件实现">
<meta property="og:url" content="https://s4amq.gitee.io/2021/12/21/Vue-%E5%8F%AF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%BC%B9%E6%A1%86%E7%BB%84%E4%BB%B6%E5%AE%9E%E7%8E%B0/index.html">
<meta property="og:site_name" content="MQ&#39;s Blog">
<meta property="og:description" content="组件特点        可自定义弹框内容、大小、按钮类型、主题颜色、过渡效果等 可通过插槽自定义弹框主体内容">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://s4amq.gitee.io/images/photo/popup.png">
<meta property="og:image" content="https://img-blog.csdnimg.cn/ea519c2998014dd5b58878627cbb3edc.gif#pic_center">
<meta property="article:published_time" content="2021-12-21T07:49:50.000Z">
<meta property="article:modified_time" content="2021-12-22T03:38:01.306Z">
<meta property="article:author" content="mqchen">
<meta property="article:tag" content="Vue">
<meta property="article:tag" content="CSS">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://s4amq.gitee.io/images/photo/popup.png"><title>Vue 可自定义弹框组件实现 | MQ's Blog</title><link ref="canonical" href="https://s4amq.gitee.io/2021/12/21/Vue-%E5%8F%AF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%BC%B9%E6%A1%86%E7%BB%84%E4%BB%B6%E5%AE%9E%E7%8E%B0/"><link rel="dns-prefetch" href="https://cdn.jsdelivr.net"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.12.1/css/all.min.css" type="text/css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" type="text/css"><link rel="stylesheet" href="/css/index.css?v=2.6.2"><script>var Stun = window.Stun || {};
var CONFIG = {
  root: '/',
  algolia: undefined,
  assistSearch: undefined,
  fontIcon: {"prompt":{"success":"fas fa-check-circle","info":"fas fa-arrow-circle-right","warning":"fas fa-exclamation-circle","error":"fas fa-times-circle"},"copyBtn":"fas fa-copy"},
  sidebar: {"offsetTop":"20px","tocMaxDepth":6},
  header: {"enable":true,"showOnPost":true,"scrollDownIcon":true},
  postWidget: {"endText":true},
  nightMode: {"enable":true},
  back2top: {"enable":true},
  codeblock: {"style":"carbon","highlight":"light","wordWrap":false},
  reward: false,
  fancybox: true,
  zoomImage: {"gapAside":"20px"},
  galleryWaterfall: {"colWidth":"100%","gapX":"10px"},
  lazyload: false,
  pjax: undefined,
  externalLink: {"icon":{"enable":true,"name":"fas fa-external-link-alt"}},
  shortcuts: undefined,
  prompt: {"copyButton":"复制","copySuccess":"复制成功","copyError":"复制失败"},
  sourcePath: {"js":"js","css":"css","images":"images"},
};

window.CONFIG = CONFIG;</script><meta name="generator" content="Hexo 5.4.0"></head><body><div class="container" id="container"><header class="header" id="header"><div class="header-inner"><nav class="header-nav header-nav--fixed"><div class="header-nav-inner"><div class="header-nav-menubtn"><i class="fas fa-bars"></i></div><div class="header-nav-menu"><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/"><span class="header-nav-menu-item__icon"><i class="fas fa-home"></i></span><span class="header-nav-menu-item__text">首页</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/archives/"><span class="header-nav-menu-item__icon"><i class="fas fa-folder-open"></i></span><span class="header-nav-menu-item__text">归档</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/categories/"><span class="header-nav-menu-item__icon"><i class="fas fa-layer-group"></i></span><span class="header-nav-menu-item__text">分类</span></a></div><div class="header-nav-menu-item"><a class="header-nav-menu-item__link" href="/tags/"><span class="header-nav-menu-item__icon"><i class="fas fa-tags"></i></span><span class="header-nav-menu-item__text">标签</span></a></div></div><div class="header-nav-mode"><div class="mode"><div class="mode-track"><span class="mode-track-moon"></span><span class="mode-track-sun"></span></div><div class="mode-thumb"></div></div></div></div></nav><div class="header-banner"><div class="header-banner-info"><div class="header-banner-info__title">MQ's Blog</div><div class="header-banner-info__subtitle"></div></div><div class="header-banner-arrow"><div class="header-banner-arrow__icon"><i class="fas fa-angle-down"></i></div></div></div></div></header><main class="main" id="main"><div class="main-inner"><div class="content-wrap" id="content-wrap"><div class="content" id="content"><!-- Just used to judge whether it is an article page--><div id="is-post"></div><div class="post"><header class="post-header"><h1 class="post-title">Vue 可自定义弹框组件实现</h1><div class="post-meta"><span class="post-meta-item post-meta-item--createtime"><span class="post-meta-item__icon"><i class="far fa-calendar-plus"></i></span><span class="post-meta-item__info">发表于</span><span class="post-meta-item__value">2021-12-21</span></span><span class="post-meta-item post-meta-item--updatetime"><span class="post-meta-item__icon"><i class="far fa-calendar-check"></i></span><span class="post-meta-item__info">更新于</span><span class="post-meta-item__value">2021-12-22</span></span></div></header><div class="post-body">
        <h5 id="组件特点"   >
          <a href="#组件特点" class="heading-link"><i class="fas fa-link"></i></a><a href="#组件特点" class="headerlink" title="组件特点"></a>组件特点</h5>
      <ol>
<li>可自定义弹框内容、大小、按钮类型、主题颜色、过渡效果等</li>
<li>可通过插槽自定义弹框主体内容</li>
</ol>
<p><img src="/images/photo/popup.png" alt="popup"></p>
<span id="more"></span>


        <h5 id="参数说明"   >
          <a href="#参数说明" class="heading-link"><i class="fas fa-link"></i></a><a href="#参数说明" class="headerlink" title="参数说明"></a>参数说明</h5>
      <div class="table-container"><table>
<thead>
<tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>可选值</th>
<th>默认值</th>
</tr>
</thead>
<tbody><tr>
<td>size</td>
<td>弹框预设大小选择</td>
<td>string</td>
<td>small / middle / large / form</td>
<td>form</td>
</tr>
<tr>
<td>title</td>
<td>弹框顶部标题</td>
<td>string</td>
<td></td>
<td>warning</td>
</tr>
<tr>
<td>btn</td>
<td>底部按钮类型</td>
<td>number</td>
<td>1 确定 / 2 取消 / 3 确定&amp;取消</td>
<td>3</td>
</tr>
<tr>
<td>submitBtn</td>
<td>确定按钮文本</td>
<td>string</td>
<td></td>
<td>submit</td>
</tr>
<tr>
<td>cancelBtn</td>
<td>取消按钮文本</td>
<td>string</td>
<td></td>
<td>cancel</td>
</tr>
<tr>
<td>mask</td>
<td>是否显示遮罩层</td>
<td>boolean</td>
<td>true / false</td>
<td>true</td>
</tr>
<tr>
<td>transition</td>
<td>选择弹框显示/隐藏的动画效果</td>
<td>string</td>
<td>top 从上方渐入渐出 / fade 淡入淡出</td>
<td>top</td>
</tr>
<tr>
<td>themeColor</td>
<td>设置主题色（头部、底部按钮背景色）</td>
<td>string</td>
<td></td>
<td>#cc6699</td>
</tr>
<tr>
<td>showModule</td>
<td>设置弹框显示隐藏的变量</td>
<td>Boolean</td>
<td></td>
<td></td>
</tr>
</tbody></table></div>

        <h5 id="事件绑定"   >
          <a href="#事件绑定" class="heading-link"><i class="fas fa-link"></i></a><a href="#事件绑定" class="headerlink" title="事件绑定"></a>事件绑定</h5>
      <div class="table-container"><table>
<thead>
<tr>
<th>事件</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>submit</td>
<td>点击确认按钮触发的事件</td>
</tr>
<tr>
<td>cancel</td>
<td>点击取消按钮 / 右上角 “x” 触发的事件</td>
</tr>
</tbody></table></div>
<ul>
<li>其他说明<br>使用插槽自定义内容时需要指定 <code>v-slot:body</code></li>
</ul>

        <h5 id="使用方法"   >
          <a href="#使用方法" class="heading-link"><i class="fas fa-link"></i></a><a href="#使用方法" class="headerlink" title="使用方法"></a>使用方法</h5>
      <ol>
<li>安装组件<br><code>npm i m-popup-dialog</code></li>
<li>在需要使用的位置引入组件</li>
</ol>
<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Popup <span class="keyword">from</span> <span class="string">&#x27;m-popup-dialog&#x27;</span></span><br><span class="line"><span class="keyword">import</span> <span class="string">&#x27;m-popup-dialog/style/popup.css&#x27;</span></span><br></pre></td></tr></table></div></figure>

<ol start="3">
<li>使用组件</li>
</ol>
<figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">popup</span> <span class="attr">title</span>=<span class="string">&quot;新增信息&quot;</span> <span class="attr">:btn</span>=<span class="string">&quot;1&quot;</span> <span class="attr">:showModule</span>=<span class="string">&quot;showModule&quot;</span> <span class="attr">submitBtn</span>=<span class="string">&quot;确定&quot;</span> <span class="attr">cancelBtn</span>=<span class="string">&quot;取消&quot;</span> @<span class="attr">cancel</span>=<span class="string">&quot;showModule = false&quot;</span> @<span class="attr">submit</span>=<span class="string">&quot;submit&quot;</span> <span class="attr">themeColor</span>=<span class="string">&quot;#ff6600&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">template</span> <span class="attr">v-slot:body</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span>&gt;</span>......<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">popup</span>&gt;</span></span><br></pre></td></tr></table></div></figure>

<figure class="highlight js"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> Popup <span class="keyword">from</span> <span class="string">&#x27;@/components/module/popup.vue&#x27;</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&#x27;xxx&#x27;</span>,</span><br><span class="line">  <span class="attr">components</span>: &#123;</span><br><span class="line">    Popup,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function"><span class="title">data</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">      <span class="attr">showModule</span>: <span class="literal">false</span>,</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">method</span>: &#123;</span><br><span class="line">    <span class="function"><span class="title">submit</span>(<span class="params"></span>)</span> &#123;</span><br><span class="line">      <span class="comment">// event(点击确认按钮触发的事件)...</span></span><br><span class="line">    &#125;,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;</span><br></pre></td></tr></table></div></figure>


        <h5 id="Demo"   >
          <a href="#Demo" class="heading-link"><i class="fas fa-link"></i></a><a href="#Demo" class="headerlink" title="Demo"></a>Demo</h5>
      <p><img src="https://img-blog.csdnimg.cn/ea519c2998014dd5b58878627cbb3edc.gif#pic_center" alt="demo"></p>

        <h5 id="Code"   >
          <a href="#Code" class="heading-link"><i class="fas fa-link"></i></a><a href="#Code" class="headerlink" title="Code"></a>Code</h5>
      <figure class="highlight html"><div class="table-container"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">template</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">transition</span> <span class="attr">name</span>=<span class="string">&quot;slide&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;popup&quot;</span> <span class="attr">:class</span>=<span class="string">&quot;transition&quot;</span> <span class="attr">v-show</span>=<span class="string">&quot;showModule&quot;</span>&gt;</span></span><br><span class="line">      <span class="comment">&lt;!-- 遮罩层 --&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;mask&quot;</span> <span class="attr">v-if</span>=<span class="string">&quot;mask&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="comment">&lt;!-- 弹框 --&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;p-dialog&quot;</span> <span class="attr">:style</span>=<span class="string">&quot;&#123; &#x27;--theme-color&#x27;: themeColor &#125;&quot;</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 1. 头部 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;p-header&quot;</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">h4</span>&gt;</span>&#123;&#123; title &#125;&#125;<span class="tag">&lt;/<span class="name">h4</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;javascript:;&quot;</span> <span class="attr">class</span>=<span class="string">&quot;iconfont icon-cuocha_kuai&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;$emit(&#x27;cancel&#x27;)&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 2. 内容(插槽) --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;p-body&quot;</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">slot</span> <span class="attr">name</span>=<span class="string">&quot;body&quot;</span>&gt;</span>content<span class="tag">&lt;/<span class="name">slot</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 3. 底部(按钮) --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;p-footer&quot;</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;javascript:;&quot;</span> <span class="attr">class</span>=<span class="string">&quot;btn&quot;</span> <span class="attr">v-if</span>=<span class="string">&quot;btn === 1&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;$emit(&#x27;submit&#x27;)&quot;</span>&gt;</span>&#123;&#123; submitBtn &#125;&#125;<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;javascript:;&quot;</span> <span class="attr">class</span>=<span class="string">&quot;btn&quot;</span> <span class="attr">v-if</span>=<span class="string">&quot;btn === 2&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;$emit(&#x27;cancel&#x27;)&quot;</span>&gt;</span>&#123;&#123; cancelBtn &#125;&#125;<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;btn-group&quot;</span> <span class="attr">v-if</span>=<span class="string">&quot;btn === 3&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;javascript:;&quot;</span> <span class="attr">class</span>=<span class="string">&quot;btn&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;$emit(&#x27;submit&#x27;)&quot;</span>&gt;</span>&#123;&#123; submitBtn &#125;&#125;<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;javascript:;&quot;</span> <span class="attr">class</span>=<span class="string">&quot;btn btn-cancel&quot;</span> @<span class="attr">click</span>=<span class="string">&quot;$emit(&#x27;cancel&#x27;)&quot;</span>&gt;</span>&#123;&#123; cancelBtn &#125;&#125;<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">transition</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">template</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span><br><span class="line"><span class="javascript">    <span class="attr">name</span>: <span class="string">&#x27;popup&#x27;</span>,</span></span><br><span class="line"><span class="javascript">    <span class="attr">props</span>: &#123;</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 1. 弹框大小：包括 小 small 中 middle 大 large 表单 form</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">size</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">type</span>: <span class="built_in">String</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">default</span>: <span class="string">&#x27;form&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 2. 弹框标题</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">title</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">type</span>: <span class="built_in">String</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">default</span>: <span class="string">&#x27;warning&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 3. 按钮类型： 1 确定 2 取消 3 确定&amp;取消</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">btn</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">type</span>: <span class="built_in">Number</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">default</span>: <span class="number">3</span>,</span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 4. 按钮内容</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">submitBtn</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">type</span>: <span class="built_in">String</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">default</span>: <span class="string">&#x27;submit&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="attr">cancelBtn</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">type</span>: <span class="built_in">String</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">default</span>: <span class="string">&#x27;cancel&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 5. 是否显示遮罩层</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">mask</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">type</span>: <span class="built_in">Boolean</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">default</span>: <span class="literal">true</span>,</span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 6. 选择弹框显示/隐藏的动画效果：top 从上方渐入渐出 fade 淡入淡出</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">transition</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">type</span>: <span class="built_in">String</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">default</span>: <span class="string">&#x27;top&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="comment">// 7. 设置主题色</span></span></span><br><span class="line"><span class="javascript">      <span class="attr">themeColor</span>: &#123;</span></span><br><span class="line"><span class="javascript">        <span class="attr">type</span>: <span class="built_in">String</span>,</span></span><br><span class="line"><span class="javascript">        <span class="attr">default</span>: <span class="string">&#x27;#cc6699&#x27;</span>,</span></span><br><span class="line"><span class="javascript">      &#125;,</span></span><br><span class="line"><span class="javascript">      <span class="attr">showModule</span>: <span class="built_in">Boolean</span>,</span></span><br><span class="line"><span class="javascript">    &#125;,</span></span><br><span class="line"><span class="javascript">  &#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">lang</span>=<span class="string">&quot;scss&quot;</span> <span class="attr">scoped</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">  // 弹框样式</span></span><br><span class="line"><span class="css">  <span class="selector-class">.popup</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">z-index</span>: <span class="number">11</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">position</span>: fixed;</span></span><br><span class="line"><span class="css">    <span class="attribute">top</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">left</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">width</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">height</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">transition</span>: all <span class="number">0.5s</span>;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.mask</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">position</span>: fixed;</span></span><br><span class="line"><span class="css">      <span class="attribute">top</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">left</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">width</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">height</span>: <span class="number">100%</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">background-color</span>: <span class="number">#000000</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">opacity</span>: <span class="number">0.5</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    <span class="selector-class">.p-dialog</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="css">      <span class="attribute">top</span>: <span class="number">40%</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">left</span>: <span class="number">50%</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>);</span></span><br><span class="line"><span class="css">      <span class="attribute">width</span>: <span class="number">660px</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">background-color</span>: <span class="number">#fff</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">border-radius</span>: <span class="number">3px</span>;</span></span><br><span class="line"><span class="css">      <span class="attribute">overflow</span>: hidden;</span></span><br><span class="line"><span class="css">      <span class="selector-class">.p-header</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">height</span>: <span class="number">60px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">background-color</span>: <span class="built_in">var</span>(--theme-color);</span></span><br><span class="line"><span class="css">        <span class="attribute">line-height</span>: <span class="number">60px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">padding</span>: <span class="number">0</span> <span class="number">25px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">font-size</span>: <span class="number">16px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">color</span>: <span class="number">#fff</span>;</span></span><br><span class="line"><span class="css">        <span class="selector-tag">a</span> &#123;</span></span><br><span class="line"><span class="css">          <span class="attribute">display</span>: inline-block;</span></span><br><span class="line"><span class="css">          <span class="attribute">position</span>: absolute;</span></span><br><span class="line"><span class="css">          <span class="attribute">right</span>: <span class="number">30px</span>;</span></span><br><span class="line"><span class="css">          <span class="attribute">top</span>: <span class="number">0px</span>;</span></span><br><span class="line"><span class="css">          <span class="attribute">color</span>: <span class="number">#fff</span>;</span></span><br><span class="line"><span class="css">          <span class="attribute">font-size</span>: <span class="number">20px</span>;</span></span><br><span class="line"><span class="css">          <span class="attribute">transition</span>: all <span class="number">0.3s</span>;</span></span><br><span class="line"><span class="css">          &amp;<span class="selector-pseudo">:hover</span> &#123;</span></span><br><span class="line"><span class="css">            <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.4</span>);</span></span><br><span class="line"><span class="css">          &#125;</span></span><br><span class="line"><span class="css">        &#125;</span></span><br><span class="line"><span class="css">      &#125;</span></span><br><span class="line"><span class="css">      <span class="selector-class">.p-body</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">padding</span>: <span class="number">42px</span> <span class="number">40px</span> <span class="number">54px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">font-size</span>: <span class="number">#fff</span>;</span></span><br><span class="line"><span class="css">      &#125;</span></span><br><span class="line"><span class="css">      <span class="selector-class">.p-footer</span> &#123;</span></span><br><span class="line"><span class="css">        <span class="attribute">height</span>: <span class="number">72px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">line-height</span>: <span class="number">72px</span>;</span></span><br><span class="line"><span class="css">        <span class="attribute">text-align</span>: center;</span></span><br><span class="line"><span class="css">        <span class="attribute">background-color</span>: <span class="number">#f5f5f5</span>;</span></span><br><span class="line"><span class="css">      &#125;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css">  // 按钮样式预设</span></span><br><span class="line"><span class="css">  <span class="selector-class">.btn</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">display</span>: inline-block;</span></span><br><span class="line"><span class="css">    <span class="attribute">width</span>: <span class="number">110px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">line-height</span>: <span class="number">30px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">text-align</span>: center;</span></span><br><span class="line"><span class="css">    <span class="attribute">background-color</span>: <span class="built_in">var</span>(--theme-color);</span></span><br><span class="line"><span class="css">    <span class="attribute">color</span>: <span class="number">#fff</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">border</span>: none;</span></span><br><span class="line"><span class="css">    <span class="attribute">border-radius</span>: <span class="number">2px</span>;</span></span><br><span class="line"><span class="css">    <span class="attribute">cursor</span>: pointer;</span></span><br><span class="line"><span class="css">    <span class="attribute">transition</span>: all <span class="number">0.2s</span>;</span></span><br><span class="line"><span class="css">    &amp;<span class="selector-pseudo">:hover</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.1</span>);</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css"></span></span><br><span class="line"><span class="css">  <span class="selector-class">.btn-cancel</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">background-color</span>: <span class="number">#999999</span>;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css">  // 弹框进出动画</span></span><br><span class="line"><span class="css">  // 从上方渐入渐出</span></span><br><span class="line"><span class="css">  <span class="selector-class">.top</span> &#123;</span></span><br><span class="line"><span class="css">    &amp;<span class="selector-class">.slide-enter-active</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">top</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    &amp;<span class="selector-class">.slide-leave-to</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">top</span>: -<span class="number">100%</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    &amp;<span class="selector-class">.slide-enter</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">top</span>: -<span class="number">100%</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css">  // 淡入淡出</span></span><br><span class="line"><span class="css">  <span class="selector-class">.fade</span> &#123;</span></span><br><span class="line"><span class="css">    &amp;<span class="selector-class">.slide-enter-active</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">opacity</span>: <span class="number">1</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    &amp;<span class="selector-class">.slide-leave-to</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">opacity</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">    &amp;<span class="selector-class">.slide-enter</span> &#123;</span></span><br><span class="line"><span class="css">      <span class="attribute">opacity</span>: <span class="number">0</span>;</span></span><br><span class="line"><span class="css">    &#125;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br></pre></td></tr></table></div></figure>


        <h5 id="其他"   >
          <a href="#其他" class="heading-link"><i class="fas fa-link"></i></a><a href="#其他" class="headerlink" title="其他"></a>其他</h5>
      <p>该组件已修改并上传 npm 方便使用<br>地址：<span class="exturl"><a class="exturl__link"   target="_blank" rel="noopener" href="https://www.npmjs.com/package/m-popup-dialog" >https://www.npmjs.com/package/m-popup-dialog</a><span class="exturl__icon"><i class="fas fa-external-link-alt"></i></span></span></p>
</div><footer class="post-footer"><div class="post-ending ending"><div class="ending__text">------ 本文结束，感谢您的阅读 ------</div></div><div class="post-copyright copyright"><div class="copyright-author"><span class="copyright-author__name">本文作者: </span><span class="copyright-author__value"><a href="https://s4amq.gitee.io">mqchen</a></span></div><div class="copyright-link"><span class="copyright-link__name">本文链接: </span><span class="copyright-link__value"><a href="https://s4amq.gitee.io/2021/12/21/Vue-%E5%8F%AF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%BC%B9%E6%A1%86%E7%BB%84%E4%BB%B6%E5%AE%9E%E7%8E%B0/">https://s4amq.gitee.io/2021/12/21/Vue-%E5%8F%AF%E8%87%AA%E5%AE%9A%E4%B9%89%E5%BC%B9%E6%A1%86%E7%BB%84%E4%BB%B6%E5%AE%9E%E7%8E%B0/</a></span></div><div class="copyright-notice"><span class="copyright-notice__name">版权声明: </span><span class="copyright-notice__value">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en" rel="external nofollow" target="_blank">BY-NC-SA</a> 许可协议。转载请注明出处！</span></div></div><div class="post-tags"><span class="post-tags-item"><span class="post-tags-item__icon"><i class="fas fa-tag"></i></span><a class="post-tags-item__link" href="https://s4amq.gitee.io/tags/Vue/">Vue</a></span><span class="post-tags-item"><span class="post-tags-item__icon"><i class="fas fa-tag"></i></span><a class="post-tags-item__link" href="https://s4amq.gitee.io/tags/CSS/">CSS</a></span></div><nav class="post-paginator paginator"><div class="paginator-prev"><a class="paginator-prev__link" href="/2022/01/05/continue-break-%E8%B7%B3%E5%87%BA%E6%8C%87%E5%AE%9A%E5%B1%82%E5%BE%AA%E7%8E%AF/"><span class="paginator-prev__icon"><i class="fas fa-angle-left"></i></span><span class="paginator-prev__text">continue / break 跳出指定层循环</span></a></div><div class="paginator-next"><a class="paginator-next__link" href="/2021/12/21/Vue%E9%A1%B9%E7%9B%AE-css-%E4%BD%BF%E7%94%A8-js-%E5%8F%98%E9%87%8F%E5%80%BC/"><span class="paginator-prev__text">Vue项目 - css 使用 js 变量值</span><span class="paginator-next__icon"><i class="fas fa-angle-right"></i></span></a></div></nav></footer></div></div></div><div class="sidebar-wrap" id="sidebar-wrap"><aside class="sidebar" id="sidebar"><div class="sidebar-nav"><span class="sidebar-nav-toc current">文章目录</span><span class="sidebar-nav-ov">站点概览</span></div><section class="sidebar-toc"><ol class="toc"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E7%BB%84%E4%BB%B6%E7%89%B9%E7%82%B9"><span class="toc-number">1.</span> <span class="toc-text">
          组件特点</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%8F%82%E6%95%B0%E8%AF%B4%E6%98%8E"><span class="toc-number">2.</span> <span class="toc-text">
          参数说明</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A"><span class="toc-number">3.</span> <span class="toc-text">
          事件绑定</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95"><span class="toc-number">4.</span> <span class="toc-text">
          使用方法</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#Demo"><span class="toc-number">5.</span> <span class="toc-text">
          Demo</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#Code"><span class="toc-number">6.</span> <span class="toc-text">
          Code</span></a></li><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%85%B6%E4%BB%96"><span class="toc-number">7.</span> <span class="toc-text">
          其他</span></a></li></ol></section><!-- ov = overview--><section class="sidebar-ov hide"><div class="sidebar-ov-author"><div class="sidebar-ov-author__avatar"><img class="sidebar-ov-author__avatar_img" src="/images/icons/02.gif" alt="avatar"></div><p class="sidebar-ov-author__text">mqchen</p></div><div class="sidebar-ov-social"><a class="sidebar-ov-social-item" href="https://blog.csdn.net/PorkCanteen" target="_blank" rel="noopener" data-popover="CSDN" data-popover-pos="up"><span class="sidebar-ov-social-item__icon">C</span></a><a class="sidebar-ov-social-item" href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=2385190394@qq.com/" target="_blank" rel="noopener" data-popover="social.发送邮件" data-popover-pos="up"><span class="sidebar-ov-social-item__icon"><i class="far fa-envelope"></i></span></a></div><div class="sidebar-ov-state"><a class="sidebar-ov-state-item sidebar-ov-state-item--posts" href="/archives/"><div class="sidebar-ov-state-item__count">14</div><div class="sidebar-ov-state-item__name">归档</div></a><a class="sidebar-ov-state-item sidebar-ov-state-item--categories" href="/categories/"><div class="sidebar-ov-state-item__count">7</div><div class="sidebar-ov-state-item__name">分类</div></a><a class="sidebar-ov-state-item sidebar-ov-state-item--tags" href="/tags/"><div class="sidebar-ov-state-item__count">6</div><div class="sidebar-ov-state-item__name">标签</div></a></div><div class="sidebar-ov-cc"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.en" target="_blank" rel="noopener" data-popover="知识共享许可协议" data-popover-pos="up"><img src="/images/cc-by-nc-sa.svg"></a></div></section><div class="sidebar-reading"><div class="sidebar-reading-info"><span class="sidebar-reading-info__text">你已阅读了 </span><span class="sidebar-reading-info__num">0</span><span class="sidebar-reading-info__perc">%</span></div><div class="sidebar-reading-line"></div></div></aside></div><div class="clearfix"></div></div></main><footer class="footer" id="footer"><div class="footer-inner"><div><span>Copyright © 2022</span><span class="footer__icon"><i class="fas fa-pizza-slice"></i></span><span>mqchen</span></div></div></footer><div class="loading-bar" id="loading-bar"><div class="loading-bar__progress"></div></div><div class="back2top" id="back2top"><span class="back2top__icon"><i class="fas fa-rocket"></i></span></div></div><script src="https://cdn.jsdelivr.net/npm/jquery@v3.4.1/dist/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.min.js"></script><script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.2/velocity.ui.min.js"></script><script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script><script src="https://cdn.jsdelivr.net/npm/masonry-layout@4.2.2/dist/masonry.pkgd.min.js"></script><script src="/js/utils.js?v=2.6.2"></script><script src="/js/stun-boot.js?v=2.6.2"></script><script src="/js/scroll.js?v=2.6.2"></script><script src="/js/header.js?v=2.6.2"></script><script src="/js/sidebar.js?v=2.6.2"></script></body></html>